<template>
  <div class="page">
    <div class="page-content">
      <div class="page-content-header">
        <img
          class="page-content-header-date"
          src="../../assets/imgs/date.png"
          alt=""
        >
        <img
          class="page-content-header-circle"
          src="../../assets/imgs/circle.png"
          alt=""
        >
        <img
          class="page-content-header-thumb"
          src="../../assets/imgs/music-thumb.jpg"
          alt=""
        >
      </div>
      <div class="page-content-main">
        <img
          class="page-content-main-marry"
          src="../../assets/imgs/marry.png"
          alt=""
        >
        <img
          class="page-content-main-leftBird"
          src="../../assets/imgs/bird-left.png"
          alt=""
        >
        <img
          class="page-content-main-rightBird"
          src="../../assets/imgs/bird-right.png"
          alt=""
        >
        <img
          class="page-content-main-rope"
          src="../../assets/imgs/rope2.png"
          alt=""
        >
      </div>
      <div class="page-content-footer">
        <h2 @click="goBack">返回</h2>
        <div>
          <div>
            用浪漫勾勒，用甜蜜描绘，用宽容着墨，用琐碎
          </div>
          <div>
            磨合，用真心书写，用日子验证，才能成就一个"爱"字。似水流年，
          </div>
          <div>
            愿与你把爱共挽，牵手向前。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  name: "content",
  setup() {
    const router = useRouter();
    const goBack = () => {
      router.back();
    };
    return {
      goBack,
    };
  },
};
</script>
<style scoped lang='scss'>
.page {
  &-content {
    text-align: center;
    padding-top: 65px;
    position: relative;
    &-header {
      &-date {
        width: 180px;
        height: 50px;
        animation: scale 2s ease-in-out alternate both;
      }
      &-circle {
        position: absolute;
        top: 110px;
        left: 13%;
        bottom: 0;
        right: 0;
        display: inline;
        width: 280px;
        height: 280px;
        animation: scale 2s ease-in-out alternate both;
      }
      &-thumb {
        display: inline;
        position: absolute;
        top: 111px;
        left: 14%;
        bottom: 0;
        right: 0;
        width: 275px;
        height: 275px;
        border-radius: 50%;
        animation: scale2 3s ease-in-out alternate both;
      }
    }
    &-main {
      &-marry {
        width: 120px;
        position: absolute;
        top: 410px;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: marryFly 2s ease-in-out alternate both;
      }
      &-leftBird {
        width: 35px;
        height: 35px;
        position: absolute;
        top: 415px;
        left: 26%;
        transform: translate(-50%, -50%);
        animation: leftBirdFly 2s ease-in-out alternate both;
      }
      &-rightBird {
        width: 35px;
        height: 35px;
        position: absolute;
        top: 415px;
        right: 16%;
        transform: translate(-50%, -50%);
        animation: rightBirdFly 2s ease-in-out alternate both;
      }
      &-rope {
        width: 100px;
        position: absolute;
        top: 428px;
        left: 37%;
        animation: ropeFly 2s ease-in-out alternate both;
      }
    }
    &-footer {
      width: 100%;
      padding: 18px;
      font-size: 16px;
      text-align: center;
      line-height: 23px;
      position: absolute;
      top: 520px;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: footerFly 3s ease-in-out alternate both;
    }
  }
}
@keyframes scale {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scale2 {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes marryFly {
  0% {
    top: 400px;
    left: 50%;
    opacity: 0;
  }
  100% {
    top: 410px;
    left: 50%;
    opacity: 1;
  }
}
@keyframes leftBirdFly {
  0% {
    top: 415px;
    left: 20%;
    opacity: 0;
  }
  100% {
    top: 415px;
    left: 26%;
  }
}
@keyframes rightBirdFly {
  0% {
    top: 415px;
    right: 10%;
    opacity: 0;
  }
  100% {
    top: 415px;
    right: 16%;
  }
}
@keyframes ropeFly {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes footerFly {
  0% {
    opacity: 0;
    top: 500px;
    left: 50%;
  }
  100% {
    top: 520px;
    left: 50%;
    opacity: 1;
  }
}
</style>
